<template>

    <nav class="navbar navbar-static-top " role="navigation">
        <div class="line-one clearfix">
            <div class="navbar-header">
                <span class="logo"></span>
                <h2>杭州楠楠楠楠贸易有限公司</h2>
            </div>
            <ul class="nav navbar-top-links navbar-right">
                <li>
                    <span class="m-r-sm text-muted welcome-message">早上好，张三</span>
                </li>
                <li class="dropdown">
                    <a href="javascript:;">钢银电商 </a>

                </li>
                <li class="dropdown">
                    <a href="javascript:;">全屏 </a>

                </li>
                <li>
                    <a href="javascript:;">
                        <i class="fa fa-sign-out"></i> 退出
                    </a>
                </li>
            </ul>
        </div>
        <nav-tab>
            <template slot="itemMenu" scope="props">
                <li v-bind:class="{'active':activeItem == props.index}" @click="routeGo(props.routeName,props.index )">{{ props.title }}{{ props.index }} <i></i></li>
            </template>
        </nav-tab>
    </nav>
</template>

<script>
    import navTab from './navTab.vue'

    export default {
        data() {
            return {

            }
        },
        methods: {
            routeGo: function (name, index) {
                //子路由跳转控制;
                this.$router.push({
                    name: name
                });

                //当前tab是否为active控制;
                let stateItem = this.$store.state.itemMenu;
                for (var i = 0; i < stateItem.length; i++) {
                    if (stateItem[index].name == name) {
                        this.$store.commit('curActive', index);
                    }
                }
            }

        },
        computed: {
            activeItem() {
                return this.$store.state.activeItem;
            }
        },
        mounted: function () {


        },
        components: {
            'navTab': navTab,

        }

    }
</script>